<html>
<head>
<title>Animated rotating Galaxy in JavaScript</title>
<style type="text/css">
#e1{}
</style>
</head>
<body bgcolor="black" text="#FFEE11" link="#FFEE11" vlink="#FFEE11"
scroll="no" style="height:100%;margin:0;overflow:hidden;padding:0;width:100%;"
onmousemove="m=1.12-event.clientY/(this.clientHeight?this.clientHeight:window.innerHeight)/9;n=event.clientX/(this.clientWidth?this.clientWidth:window.innerWidth)-.5">

<!--

document.body.clientWidth is for IE,
window.innerWidth is for all other browsers.

        ! Opera 9   ! Firefox 3 ! IE 6
clientX | 687       | 406       | 476
layerX  | undefined | 406       | undefined
offsetX | 687       | undefined | 474
pageX   | 687       | 406       | undefined
screenX | 881       | 670       | 701
x       | 687       | undefined | 476

-->

<script type="text/javascript">

    var m = 1.05;
    var n = 0.2;
    var w = [];
    var z = [];
    var R = Math.random;
    var cssNode;

    var starcount = 150;
    for (var i = starcount; i--; ) {
        document.write('<b id="e', i, '" style="position:absolute">.</b>');
        w[i] = 0;
        z[i] = 99;
    }

    function f() {
        var s = '';
        for (i = starcount; i--; ) {
            a = 50 + Math.sin(w[i]) * z[i];
            b = 50 + Math.cos(w[i]) * z[i];
            w[i] -= n / z[i];
            z[i] *= m;
            if (a < 0 || a > 99 || b < 0 || b > 99) {
                w[i] = R() * Math.PI * 2;
                z[i] = R() + 0.01;
            }
            s += "#e" + i + "{left:" + a + "%;top:" + b + "%}";
        }

        /* Change the entire style sheet at once */
        if (cssNode.cssText) cssNode.cssText = s;
        /* The textContent property is the only one supported by Firefox and Opera */
        else if (cssNode.textContent) cssNode.textContent = s;
        else {
            alert("This browser does not support changing the entire style sheet of the page.");
            return;
        }

        setTimeout("f()", 20);
    }

    /* The cssText property is supported only by IE */
    if (typeof document.styleSheets[0].cssText != "undefined")
        cssNode = document.styleSheets[0];
    /* The ownerNode object exists in most browsers */
    else if (document.styleSheets[0].ownerNode)
        cssNode = document.styleSheets[0].ownerNode;
    f();

</script>

<address style="bottom: 10px; font-family: Georgia; font-style: normal; position: absolute; right: 10px; text-align: right;">&copy; <a href="http://maettig.com/">Thiemo M&auml;ttig</a>,
created in <a href="http://maettig.com/1034518260">October 2002</a><br />
<a href="./">More JavaScript experiments &raquo;</a></address>

</body>
</html>